<template>
  <div id="app">
    <!-- 1.template只有一个根元素
         2.组件内data必须是一个函数, 独立作用域
         3.(大驼峰推荐)-2个单词以上 XxxXxx
     -->
    <div class="container">
      <!-- 题目 -->
      <div class="title">
        <em>管理模块</em>
        <span @click="toggleFun1">{{ flag1 ? "收起" : "展开" }}</span>
      </div>
      <!-- 内容 -->
      <div class="content" v-show="flag1">
        <div>表单管理</div>
        <div>列表管理</div>
        <div>报表管理</div>
      </div>
    </div>
    <div class="container">
      <!-- 题目 -->
      <div class="title">
        <em>管理模块</em>
        <span @click="toggleFun2">{{ flag2 ? "收起" : "展开" }}</span>
      </div>
      <!-- 内容 -->
      <div class="content" v-show="flag2">
        <div>表单管理</div>
        <div>列表管理</div>
        <div>报表管理</div>
      </div>
    </div>
    <div class="container">
      <!-- 题目 -->
      <div class="title">
        <em>管理模块</em>
        <span @click="toggleFun3">{{ flag3 ? "收起" : "展开" }}</span>
      </div>
      <!-- 内容 -->
      <div class="content" v-show="flag3">
        <div>表单管理</div>
        <div>列表管理</div>
        <div>报表管理</div>
      </div>
    </div>
  </div>
</template>

<script>
// 本地图片的引入使用import导入方式进行使用
// vue组件使用是ES6模块化的规范
export default {
  name: "App",
  components: {},
  // data:对象/函数在组件中只能是函数
  data() {
    return {
      flag1: false,
      flag2: false,
      flag3: false,
    };
  },
  methods: {
    toggleFun1() {
      this.flag1 = !this.flag1;
    },
    toggleFun2() {
      this.flag2 = !this.flag2;
    },
    toggleFun3() {
      this.flag3 = !this.flag3;
    },
  },
};
</script>

<style>
em {
  font-style: normal;
}
.container {
  width: 200px;
  border: 1px solid #ccc;
  margin: 50px auto;
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  padding: 0 10px;
}
.title span {
  font-size: 12px;
  /* 光标的小手 */
  cursor: pointer;
}
.content div {
  height: 40px;
  line-height: 40px;
  border-top: 1px solid #ccc;
  padding: 0 10px;
}
</style>
